<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>匹配所有单选按钮</title>
		<style>
			*{
				font-size: 14px;
				font-family: "微软雅黑";
				margin-top: 10px;
			}
			
			label{
				display: block;
				font-size: 14px;
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: left;
				display: block;
				cursor: pointer;
				width: 350px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			label:hover{
				cursor: pointer;
			}
			
			
			.sp{
				border: 3px solid green;
				width: 200px;
			}
		</style>
	</head>
	<body>
		 
		 <ul>
		 	<li>北京</li>
		 	<li>上海</li>
		 	<li>广州</li>
		 </ul>
		  
	
	
		<label onclick="add()">增加深圳</label>
		<label onclick="canc()">取消包裹</label>
	</form>
	</body>
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		function add(){
			$("<li>深圳</li>").appendTo($("ul"));
			$("ul").wrap("<div class='sp'></div>");
		}
		
		function canc(){
			$("ul").unwrap();
		}
		
	</script>
</html>

